<template>
	<view class="i-my-rich-text" :style="[viewStyle]">
		<e-parse :content="option.text"></e-parse>
	</view>
</template>

<script lang="ts" setup>
	import { computed } from 'vue'
	import { px2rpx } from './utils'
	
	const props = withDefaults(defineProps<{
		option : {
			backgroundColor: string
			paddingTop: number
			paddingBottom: number
			paddingX: number
			color: string
			text: string
		}
	}>(), {
		option: () => ({
			backgroundColor: '',
			paddingTop: 10,
			paddingBottom: 10,
			paddingX: 10,
			color: "rgba(48, 49, 51, 1)",
			text: ''
		})
	})
	
	const viewStyle = computed(() => {
		return {
			padding: `${px2rpx(props.option.paddingTop)} ${px2rpx(props.option.paddingX)} ${px2rpx(props.option.paddingBottom)} ${px2rpx(props.option.paddingX)}`,
			backgroundColor:props.option.backgroundColor,
			color:props.option.color,
		}
	})
	

</script>

<style>
</style>